<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单支付</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单支付">
    <meta name="description" content="订单支付">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox confirmpage hasmenu" id="app" v-if="loaded==true">
    <div class="confirm">
        <!-- 收货地址为空 -->
        <a href="./address.html" class="address"><img src="images/address-img.png"></a>
        <!-- 收货地址不为空 -->
        <a href="./address.html" class="address choosed">
          <p>山东省菏泽市成武县</p>
          <h3>凤凰国际东区10号楼1002室</h3>
          <p><span>刘小波</span>13910436282</p>
        </a>

        <div class="probuct">
            <div class="row">
                <div class="img"><img :src="proData.thumb_image_url" alt=""></div>
                <div class="text">
                    <!-- <h3>好物优选 | 金龙鱼玉米油非订转基因4升</h3> -->
                    <!-- <p><em>￥</em>96.8</p> -->
                    <h3>{{proData.title}}</h3>
                    <p><em>￥</em>{{specsSelect.sale_price}}</p>
                </div>
            </div>
            <div class="bot">
                <p><em>套餐：</em><span>{{specsSelect.spec_name}}</span></p>
                <div class="number">
                    <span :class="['icon jian',{'disabled': quantity==1}]" @click="jianquantity"><i
                            class="el-icon-minus"></i></span>
                    <em>{{quantity}}</em>
                    <span :class="['icon add',{'disabled': quantity==proData.order_limit}]" @click="addquantity"><i
                            class="el-icon-plus"></i></span>
                </div>
            </div>
        </div>
        <div class="user">
            <h3>用户信息</h3>
            <div class="list">
                <div class="input"><span>姓名：</span><input type="text" v-model="name" placeholder="请填写姓名"></div>
                <div class="input"><span>手机号：</span><input type="text" v-model="mobile" placeholder="请填写手机号"></div>
            </div>
        </div>
        <div :class="['label label1',{'checked': isAgree==true}]">
            <div class="checkbox" @click="checkxy"><i class="el-icon-check" v-if="isAgree==true"></i></div>
            <p>我已阅读并同意用户退款协议及<a href="./xieyi.html">《平台用户服务协议》</a></p>
        </div>
        <div class="label">
            <p>用户退款协议：此商品为限时限量特惠团单，为防止资源浪费，请您在有效期内及时消费。如需退款，有效期内收取20%的违约金，如已过使用时间则视为放弃使用，将自动作废。非个人原因导致无法使用可全额退款</p>
        </div>
    </div>
    <div class="zhifubotmenu">
        <div class="fl"><span>合计金额：</span><h5><em>￥</em>{{jine}}</h5></div>
        <div class="btn" @click="gosuborder">去支付</div>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        loaded: false,
        id: '',
        specs_id: '',
        talent_id: '',
        proData: '',
        specsSelect: '',
        name: '',
        mobile: '',
        allowclick: true,
        quantity: 1,
        isAgree: true,
        jine: '',
        user_info: {},
      }
    },
    mounted() {
      
      var that = this;
      that.id = getUrlParam("id");
      that.specs_id = getUrlParam("specs_id");
      if (getUrlParam("talent_id")) {
        that.talent_id = getUrlParam("talent_id");
      }
      that.getdata();

      //加载默认客户信息
      client_get('default_customer').then(res => {
        this.name = res.name
        this.mobile = res.mobile
      })
    },
    methods: {
      getdata: function () {
        var that = this;
        // 获取商品详情
        client_get('products/' + that.id).then(res => {
          console.log(res)
          that.proData = res;
          that.proData.order_limit = 5;
          $(that.proData.specs).each(function (i, v) {
            v.isSelected = 'false';
            if (v.id == that.specs_id) {
              v.isSelected = 'true';
              that.specsSelect = v;
              that.jine = that.specsSelect.sale_price;
            }
          })
          that.loaded = true;
        })
      },
      jianquantity: function () {
        var that = this;
        if (that.quantity >= 2) {
          that.quantity -= 1;
          that.jine = Number(that.specsSelect.sale_price) * Number(that.quantity);
        }
      },
      addquantity: function () {
        var that = this;
        if (that.quantity < that.proData.order_limit) {
          that.quantity += 1;
          that.jine = Number(that.specsSelect.sale_price) * Number(that.quantity);
        }
      },
      checkxy: function () {
        var that = this;
        that.isAgree = !that.isAgree;
      },
      gosuborder: function () {
        var that = this;
        var name = that.name;
        var mobile = that.mobile;
        var checkmobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
        layer.closeAll();
        if (!name) {
          layer.msg('请填写姓名');
          return false;
        }
        if (!mobile) {
          layer.msg('请填写手机号');
          return false;
        } else if (!checkmobile.test(mobile)) {
          layer.msg('您填写的手机号有误，请重新填写');
          return false;
        }
        if (that.isAgree != true) {
          layer.msg('请勾选并同意退款协议');
          return false;
        }
        var subdata = {};
        if (that.talent_id != '') {
          subdata = {
            "talent_id": that.talent_id,
            "spec_id": that.specs_id,
            "quantity": that.quantity,
            "customer_name": name,
            "customer_mobile": mobile
          }
        } else {
          subdata = {
            "spec_id": that.specs_id,
            "quantity": that.quantity,
            "customer_name": name,
            "customer_mobile": mobile
          }
        }
        client_post('orders', subdata).then(res => {
          console.log(res);
          var id = res.id

          // window.location.href='./buyed.html?id='+res.id;
          function onBridgeReady() {
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": res.payment.appId,     //公众号ID，由商户传入
                "timeStamp": res.payment.timeStamp,     //时间戳，自1970年以来的秒数
                "nonceStr": res.payment.nonceStr,      //随机串
                "package": res.payment.package,
                "signType": res.payment.signType,     //微信签名方式：
                "paySign": res.payment.paySign
              },
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  window.location.href = './buyed.html?id=' + id;
                }
              });
          }

          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          } else {
            onBridgeReady();
          }
        })
      },

    }
  });
</script>
</html>